<script setup>
import { onMounted, ref, reactive } from "vue";
import { useRouter } from "vue-router";
import { captchaImage, doLogin, userInfo, authSzqs } from "@/api/index";
import { ElMessage } from "element-plus";
import { useUserStore } from "@/stores/user";
import { UnionAuth } from "@/utils/unionAuth/src/getToken.js";

const hostname = window.location.href;
var unionAuth;
const dataStore = useUserStore();
const ruleFormRef = ref();
const codeLoading = ref(false);
const imgUrl = ref("");
const uuid = ref("");
const useStore = useUserStore();
const router = useRouter();
const showLoading = ref(true);

if (hostname.includes("//23.210")) {
  unionAuth = new UnionAuth({
    appKey: "3c1affa574d8419f6af46c2ea006f101",
  });
}

const getCodeImg = () => {
  codeLoading.value = true;
  captchaImage()
    .then((res) => {
      console.log(res, "ooooo");
      uuid.value = res.data.uuid;
      const blob = new Blob([res.data.img, { type: "image/jpg" }]);
      imgUrl.value = "data:image/jpeg;base64," + res.data.img; // href属性指定下载链接window.URL.createObjectURL(blob);
      codeLoading.value = false;
    })
    .catch((e) => {
      codeLoading.value = false;
    });
};
const ruleForm = reactive({
  username: "",
  password: "",
  code: "",
});

const rules = {
  username: [
    { required: true, message: "请输入账号", trigger: "blur" },
    { min: 1, max: 10, message: "账号长度不超过10", trigger: "blur" },
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 1, max: 20, message: "密码长度不超过20", trigger: "blur" },
  ],
  code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
};

const submitForm = (formEl) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      console.log("submit!", ruleForm);
      doLogin({
        username: ruleForm.username,
        password: ruleForm.password,
        code: ruleForm.code,
        uuid: uuid.value,
      }).then((res) => {
        console.log(res, "余旺");
        if (res.code == 200) {
          let accessToken = res.data?.tokenInfo?.tokenValue;
          let user = JSON.stringify(res.data.user);
          localStorage.setItem("accessToken", accessToken);
          localStorage.setItem("user", user);
          localStorage.setItem("accessToken_1", "1");
          useStore.authentication = 2;
          useStore.userName = res.data?.user?.userName;
          router.replace("../index");
          userInfo().then((res) => {
            console.log(res, "userInfo");
            dataStore.userType = res.data?.userInfo?.userType;
            dataStore.district = res.data.userInfo.district;
          });
        } else {
          ElMessage.error(res.message);
          getCodeImg();
        }
      });
    } else {
      console.log("error submit!");
    }
  });
};

let screen = ref();
onMounted(() => {
  if (hostname.includes("//23.210")) {
    // 方法1：通过检查dd对象是否存在
    if (typeof dd !== "undefined" && dd.ready) {
      unionAuth.ready().then((res) => {
        console.log(unionAuth);
      });
      setTimeout(() => {
        let signToken = unionAuth.getToken();

        authSzqs({ dcqcTk: signToken }).then((res) => {
          if (res.data.code == 200) {
            console.log(res.data.data.tokenValue, "lllllll");
            let accessToken = res.data.data.tokenValue;
            localStorage.setItem("accessToken", accessToken);
            showLoading.value = false;
            router.replace("../index");
            // const url=`http://23.210.23.1:8081/edu-dw/?dcqc-tk=${accessToken}`
            // unionAuth.redirectTo(url)
            userInfo().then((res) => {
              console.log(res, "userInfo");
              if (res.code == 200) {
                // showLoading.value = false;
                dataStore.userType = res.data.userInfo?.userType;
                dataStore.district = res.data.userInfo?.district;
              }
            });
          } else {
            console.log("无权");
            showLoading.value = false;
            router.replace("../prompt");
          }
        });
      }, 500);
    } else {
      console.log("当前不在钉钉环境中");
    }
  } else {
    showLoading.value = false;
    // userInfo().then((res) => {
    //   console.log(res, "userInfo");
    //   dataStore.userType = res.data?.userInfo?.userType;
    //   dataStore.district = res.data?.userInfo?.district;
    // });
  }
  let referrer = JSON.stringify(document.referrer);
  console.log("上一个页面的URL是：" + referrer);
  if (referrer) {
    if (referrer.includes("http://202.202.16.21/")) {
      console.log("确认OA");
      doLogin({
        username: "oasjw",
        type: "0",
      }).then((res) => {
        console.log(res, "oa跳转情况");
        if (res.code == 200) {
          let accessToken = res.data?.tokenInfo?.tokenValue;
          let user = JSON.stringify(res.data.user);
          localStorage.setItem("accessToken", accessToken);
          localStorage.setItem("accessToken_1", "1");
          localStorage.setItem("user", user);
          useStore.authentication = 2;
          useStore.userName = res.data?.user?.userName;
          showLoading.value = false;
          router.replace("../index");
        } else {
          ElMessage.error(res.message);
        }
      });
    }
  }
  screen.value.style.transform = `scale(${getScale()}) translate(-50%,-50%)`;
  getCodeImg();
});
const getScale = (width = 1920, height = 1080) => {
  let ww = window.innerWidth / width;
  let wh = window.innerHeight / height;
  return ww < wh ? ww : wh;
};

// 监听容器大小
window.onresize = () => {
  screen.value.style.transform = `scale(${getScale()}) translate(-50%,-50%)`;
};
</script>

<template>
  <div class="container_max">
    <div
      class="screen"
      ref="screen"
      v-loading="showLoading"
      element-loading-background="rgba(29, 52, 111,0.5)"
    >
      <div class="login_content" v-show="!showLoading">
        <div class="img">
          <img src="./imgs/Group.png" alt="" />
          <div class="bt">渝悦·渝有优教</div>
          <div class="content">
            <div class="l">
              <div class="l_item">
                <img src="./imgs/Frame(2).png" alt="" />
              </div>
              <div class="l_item">
                <img src="./imgs/Frame.png" alt="" />
              </div>
              <div class="l_item">
                <img src="./imgs/Frame(1).png" alt="" />
              </div>
            </div>
            <div class="r">
              <el-form
                ref="ruleFormRef"
                :model="ruleForm"
                status-icon
                :rules="rules"
                label-width="0px"
                class="demo-ruleForm"
              >
                <el-form-item label="" prop="username" class="item1">
                  <el-input
                    v-model="ruleForm.username"
                    class="item_c"
                    placeholder="请输入账户"
                  >
                  </el-input>
                </el-form-item>

                <el-form-item label="" prop="password" class="item1">
                  <el-input
                    v-model="ruleForm.password"
                    :type="'password'"
                    autocomplete=""
                    class="item_c"
                    placeholder="请输入密码"
                  >
                  </el-input>
                </el-form-item>
                <el-form-item label="" prop="code" class="item1">
                  <el-row style="width: 100%">
                    <el-col :span="16"
                      ><el-input
                        v-model="ruleForm.code"
                        placeholder="请输入验证码"
                        class="item_c1"
                    /></el-col>
                    <el-col :span="8" @click="getCodeImg">
                      <el-button class="code-box">
                        <img v-if="imgUrl" :src="imgUrl" alt="" srcset="" />
                      </el-button>
                    </el-col>
                  </el-row>
                </el-form-item>
              </el-form>
            </div>
          </div>

          <div class="submit" @click="submitForm(ruleFormRef)">确定</div>
          <!-- <el-button @click="resetForm(ruleFormRef)">Reset</el-button> -->
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
::v-deep .el-input__inner:-webkit-autofill {
  background-color: #fff !important; /* 设置为和默认背景一致 */
  color: #c9e9f8 !important; /* 确保文本颜色正常 */
  transition: background-color 5000s ease-in-out 0s; /* 避免自动填充的黄色背景 */
}
::v-deep .el-input__inner {
  font-family: Alibaba PuHuiTi 2, Alibaba PuHuiTi 20 !important;
  font-weight: normal !important;
  font-size: 14px !important;
  color: #ffffff !important;
  line-height: 14px !important;
  text-align: left !important;
  font-style: normal !important;
  text-transform: none !important;
}
::v-deep .el-input__wrapper {
  border: none !important; /* 移除边框 */
  background-color: transparent !important; /* 设置背景为透明 */
  /* 如果需要，你还可以添加其他样式来进一步自定义输入框的外观 */
  box-shadow: none; /* 移除可能的阴影效果 */
  /* 注意：!important 是为了确保这些样式能够覆盖其他可能存在的样式规则 */
  border-bottom: 1px #2287d6 solid !important;
}

::v-deep .el-form-item__error {
  margin-top: -15px !important;
  border: none !important;
  font-family: Alibaba PuHuiTi 2, Alibaba PuHuiTi 20 !important;
  font-weight: normal;
  font-size: 14px !important;
  color: #ff0202 !important;
  line-height: 12px !important;
  text-align: left !important;
  font-style: normal !important;
  text-transform: none !important;
}
.code-box {
  margin-left: 10px;
  width: calc(100% - 10px);
  height: 60px;
  cursor: pointer;
  padding: 0;
  img {
    width: 110%;
  }
}
.content {
  width: 100%;
  height: 330px;
  margin-top: 30px;
  display: flex;
  .l {
    width: 10%;
    height: 330px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    .l_item {
      width: 100%;
      height: 33.3%;

      display: flex;
      justify-content: center;
      align-items: center;
      img {
        width: 30px;
        height: 30px;
      }
    }
  }
  .r {
    width: 90%;
    height: 100%;

    .demo-ruleForm {
      width: 100%;
      height: 330px;
      // display: flex;
      // flex-wrap: wrap;
      // justify-content: space-between;
    }
  }
}
.container_max {
  width: 100vw;
  height: 100vh;
  background: url("./imgs/bj.png") no-repeat;
  background-size: 100% 100%;
  background-position: center;
  position: relative;
}
.item1 {
  height: 33.3%;
  width: 100%;
  margin: 0;
}
.item_c {
  height: 60%;
  border: none; /* 移除边框 */
  box-shadow: none; /* 移除阴影 */
  font-size: 30px;
}
.item_c1 {
  height: 60px;
  border: none; /* 移除边框 */
  box-shadow: none; /* 移除阴影 */
  font-size: 20px;
}

.screen {
  position: fixed;
  width: 1920px;
  height: 1080px;
  left: 50%;
  top: 50%;
  transform-origin: left top;

  .login_content {
    width: 600px;
    height: 600px;
    position: absolute;
    top: 291px;
    left: 1044px;
    padding: 0 32px 0 32px;
    background: linear-gradient(
      180deg,
      rgba(42, 119, 181, 0.15) 0%,
      rgba(42, 119, 181, 0.5) 49%,
      rgba(42, 119, 181, 0.15) 100%
    );
    border-radius: 20px 20px 20px 20px;
    border: 1px solid;
    border-image: linear-gradient(
        180deg,
        rgba(72, 122, 219, 1),
        rgba(125, 208, 255, 1),
        rgba(72, 122, 219, 1)
      )
      1 1;
  }
  .img {
    width: 100%;
    height: 70px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    position: relative;
    .submit {
      position: absolute;
      top: 492px;
      left: 6.4%;
      width: 87.2%;
      height: 48px;
      background: #083e80;
      box-shadow: inset 0px 0px 20px 0px rgba(64, 163, 255, 0.9);
      border-radius: 4px 4px 4px 4px;
      border: 1px solid rgba(9, 214, 255, 0.5);
      font-family: Alibaba PuHuiTi 2, Alibaba PuHuiTi 20;
      font-weight: normal;
      font-size: 24px;
      color: rgba(201, 233, 248, 0.8);
      line-height: 18px;
      text-align: left;
      font-style: normal;
      text-transform: none;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .submit:hover {
      border: 2px solid #5787d9;
      box-shadow: 0px 2px 4px #5787d9;
      cursor: pointer;
      background: linear-gradient(to bottom, #062c65, #020b34);
      color: #ffffff;
    }
    .bt {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: Alimama ShuHeiTi, Alimama ShuHeiTi;
      font-weight: bold;
      font-size: 35px;
      background-image: linear-gradient(#ffffff 0%, #92deff 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
    img {
      width: 363.11px;
      height: 69px;
    }
  }
}

.bottom {
  width: 100%;
  height: 2%;
  /* background: url("../assets/images1/bottom_bg1.png") no-repeat; */
  // background-size: cover;
  // background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  img {
    width: 70;
    height: 100%;
  }
}
</style>
